// todo ======================= 图表概览 =======================
axios.get(`/student/overview`).then(({data:{code,data}})=>{
qs(`.total`).innerHTML=data.total
qs(`.avgSalary`).innerHTML=data.avgSalary
qs(`.avgAge`).innerHTML=data.avgAge 
qs(`.proportion`).innerHTML=data.proportion
})
// todo ======================= 饼图 =======================
function bing(bingA){
  let myChart=echarts.init(qs(`.pie`)) 
  let option = {
    title:{
        show:true,
         text:'籍贯'
       }, 
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 150],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
        },
        data: bingA
      },
    ],
  }
  myChart.setOption(option)
}
// todo ======================= 地图 =======================panel map
function ditu(chinaGeoCoordMap,chinaDatas){
  let myChart=echarts.init(qs(`.map`)) 
let convertData = function(data) {
    let res = [];
    for(let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = chinaGeoCoordMap[dataItem[0].name];
        let toCoord = [121.4648, 31.2891];
        if(fromCoord && toCoord) {
            res.push([{
                coord: fromCoord,
                value: dataItem[0].value
            }, {
                coord: toCoord,
            }]);
        }
    }
    return res;
};
let series = [];
[['上海市', chinaDatas]].forEach(function(item, i) {
    // console.log(item)
    series.push({
            type: 'lines',
            zlevel: 2,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function(params){//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function(val) {
                return 5+ val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function(dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
        //被攻击点
        {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 4
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    offset:[5, 0],
                    color: '#0f0',
                    formatter: '{b}',
                    textStyle: {
                        color: "#0f0"
                    }
                },
                emphasis: {
                    show: true,
                    color: "#f60"
                }
            },
            symbol: 'pin',
            symbolSize: 50,
            data: [{
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10]),
            }],
        }
    );
});
let  option = {
 title:{
  show:true,
   text:'来沪路线'
 }, 
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function(params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            let res = "";
            let name = params.name;
            let value = params.value[params.seriesIndex + 1];
            res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
            return res;
        }
    },
    // backgroundColor:"#013954",
    visualMap: { //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        zoom: 1.2,
        label: {
            emphasis: {
                show: false
            }
        },
        // roam: true, //是否允许缩放
        itemStyle: {
            normal: {
                color: 'rgba(51, 69, 89, .5)', //地图背景色
                borderColor: '#516a89', //省市边界线00fcff 516a89
                borderWidth: 1
            },
            emphasis: {
                // color: 'rgba(37, 43, 61, .5)' //悬浮背景
            }
        }
    },
    series: series
};
myChart.setOption(option)
}
// todo ======================= 点击三个点 =======================
qs(`.btn`).addEventListener(`click`,function(){
  qs(`#batch`).classList.toggle(`show`)
})
// todo ======================= 五次成绩 =======================
qsAll(`#batch li`).forEach((item,index) => {
  item.addEventListener(`click`,function(){
    // console.log(1);
    getScore(index+1)
  })
});
// todo ======================= 柱图数据 =======================
getScore()
function getScore(batch=1){
  axios.get(`/score/batch`,{
    params:{
      batch
    }
  }).then(({data:{code,data}})=>{
    if(code===0){
      // console.log(data);
      bar(data)
    }
  })
}
// todo ======================= 柱状图 =======================
function bar({group,avgScore,lt60,gt60,gt80}){
  let myChart=echarts.init(qs(`.barChart`)) 
  let option = {
    grid:{
        left:70,
        right : 70,
        bottom : 30,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {},
    xAxis: [
      {
        type: 'category',
        data: group,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        // name: 'Precipitation',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value} 分'
        }
      },
      {
        type: 'value',
        // name: 'Temperature',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value} 人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth:15,
        data: avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth:15,

        data: lt60
      },
      {
        name: '60到80分之间',
        type: 'bar',
        barWidth:15,

        yAxisIndex: 1,
        data: gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth:15,

        yAxisIndex: 1,
        data: gt80
      }
    ]
  };
  myChart.setOption(option)
}
// todo  ======================= 折线图 =======================
function zhexian(dataName,dataSalary,dataTrueSalary){
  let myChart=echarts.init(qs(`.line`)) 
let option = {
    legend: {
        top: 20,
      },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
        text: '薪资 Salary',
        textStyle: {
          color: '#6d767e'
        }
      },
   
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data:dataName
      // data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', 
      // '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 10
      },
      {
        start: 0,
        end: 10
      }
    ],
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, 
        symbol: 'none',
        // sampling: 'lttb',
        itemStyle: {
          color: '#ee6666'
        },
        data:dataSalary
       
        // data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 
        //     8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5470c6'
        },
        data:dataTrueSalary
        // data:
        //  [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 
        //     8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
      }
    ]
  };
  myChart.setOption(option)

}
// todo===================所有学员===========================
axios.get(`/student/list`).then(({data:{data,code}})=>{
  // console.log(data);
  let dataName=[]
  let dataSalary=[]
  let dataTrueSalary=[]
  // 饼图
  let dataProvince=[]
  // 地图
    let chinaGeoCoordMap={'上海市': [121.4648, 31.2891]}
    let chinaDatas=[]
 
  data.forEach(item => {
    dataName.push(item.name)
    dataSalary.push(item.salary)
    dataTrueSalary.push(item.truesalary)
    dataProvince.push(item.province)

    chinaGeoCoordMap[item.county]=[item.jing,item.wei]
    chinaDatas.push([{name:item.county,value:0}])
  });
  ditu(chinaGeoCoordMap,chinaDatas)
  zhexian(dataName,dataSalary,dataTrueSalary)
  // *============ 饼图数据==============
  let dataProvinceQC = [...new Set(dataProvince)]
  let dataProvincePJ={}
  let bingA=[]
  dataProvinceQC.forEach(item=>{
    dataProvincePJ[item]=1
  })
  data.forEach(item1=>{
    dataProvinceQC.forEach(item=>{
      if(item===item1.province){
        dataProvincePJ[item]++
      }
    })
  })
  dataProvinceQC.forEach(item=>{
  bingA.push({value:dataProvincePJ[item],name:item})
})
 bing(bingA)
})

